<template>
  <div class="tablePageWarp">
    <!-- 搜索区域 -->
    <div class="tableListSearch">
      <business-type-search @clickbtn="handleClickSearchBtn"></business-type-search>
    </div>
    <!-- 操作区域 -->
    <div class="tableListAction">
      <auth-button type="primary" :auth="flowPerms.bussinessType.add" @click="handleAddConfig">
        <i class="iconfont icon-xinjian"></i>
        {{ $t('newly') }}
      </auth-button>
      <auth-button
        type="danger"
        :auth="flowPerms.bussinessType.delete"
        @click="handleBatchDelete"
        :disabled="disableBatchDeleteBtn"
      >
        <i class="iconfont icon-suoxiao1"></i>
        {{ $t('multiDel') }}
      </auth-button>
    </div>
    <!-- 列表区域 -->
    <div class="tableListMain commonTableSty">
      <business-type-table-list
        ref="flowConfigTableComp"
        :tableData="childTableData"
        @selectedRowchange="handleselectedRowchange"
        @operateRow="handleOperateRow"
      ></business-type-table-list>
    </div>
    <!-- 新增对话框 -->
    <add-config-modal
      ref="addConfigModal"
      :formData="childFormData"
      @addOrEditDone="handleRefreshTable"
    ></add-config-modal>
  </div>
</template>
<script>
import i18n from '@/lang'
import BusinessTypeSearch from './components/BusinessTypeSearch.vue'
import BusinessTypeTableList from './components/BusinessTypeTableList.vue'
import AddConfigModal from './components/AddConfigModal.vue'
import AuthButton from '@/components/AuthButton'
import { flowPerms } from '@/config/permission/index'
export default {
  components: {
    BusinessTypeSearch,
    BusinessTypeTableList,
    AuthButton,
    AddConfigModal
  },
  computed: {
    replacedTip () {
      return i18n.t('batchDeleteFlowConfigTip').replace('__ Selected__', '"' + this.selectedRowFlowName + '"')
    },
    batchReplacedTip () {
      return i18n.t('batchDeleteFlowConfigTip').replace('__ Selected__', '"' + this.selectedMultiFlowName + '"')
    }
  },
  data () {
    return {
      flowPerms,
      selectedRows: [],
      disableBatchDeleteBtn: true,
      childTableData: [],
      selectedMultiFlowName: '',
      selectedRowFlowName: '',
      selectedIdArr: [],
      childFormData: {}
    }
  },
  created () {},
  mounted () {
    this.initiSearchValue()
  },
  methods: {
    // 搜索条件 重置和初始化
    initiSearchValue () {
      this.$store.commit('resetFlowConfigQueryParams')
      this.$refs.flowConfigTableComp.refreshData(true)
    },
    // 顶部搜索区域点击查询按钮
    handleClickSearchBtn () {
      this.$refs.flowConfigTableComp.refreshData(true)
    },
    // 点击新增按钮
    handleAddConfig () {
      this.childFormData = {}
      this.$refs.addConfigModal.switchVisible(true, 'add', null)
    },
    // 点击批量删除按钮
    handleBatchDelete () {
      if (this.selectedRows.length > 0) {
        console.log(this.selectedIdArr, this.selectedMultiFlowName)
        const that = this
        this.$confirm({
          title: that.$t('systemTip'),
          content: that.batchReplacedTip,
          onOk () {
            that.$api.deleteFlowConfig(that.selectedIdArr).finally(() => {
              that.$refs.flowConfigTableComp.refreshData(true)
              that.$refs.flowConfigTableComp.emptyTableSelction()
            })
          },
          onCancel () {}
        })
      } else {
        this.disableBatchDeleteBtn = true
      }
    },
    // 表格组件选择项改变后传递上来触发的事件
    handleselectedRowchange (data) {
      if (data.length > 0) {
        this.disableBatchDeleteBtn = false
        const selectedNameArr = data.map((item) => {
          return item.businessName + '[' + item.businessCode + ']'
        })
        this.selectedIdArr = data.map((item) => {
          return item.id
        })
        this.selectedMultiFlowName = selectedNameArr.toString()
      } else {
        this.disableBatchDeleteBtn = true
      }
      this.selectedRows = data
    },
    // 新增或编辑配置成功以后刷新表格
    handleRefreshTable () {
      this.$refs.flowConfigTableComp.refreshData(true)
    },
    // 为了模拟删除和编辑，实现的子组件事件
    handleOperateRow (data) {
      if (data[0] === 'edit') {
        this.childFormData = JSON.parse(JSON.stringify(data[1]))
        this.$refs.addConfigModal.switchVisible(true, 'edit', this.childFormData)
      } else if (data[0] === 'delete') {
        this.selectedRowFlowName = data[1].businessName + '[' + data[1].businessCode + ']'
        const that = this
        this.$confirm({
          title: that.$t('systemTip'),
          content: that.replacedTip,
          onOk () {
            that.$api.deleteFlowConfig([data[1].id]).finally(() => {
              that.$refs.flowConfigTableComp.refreshData(true)
            })
          },
          onCancel () {}
        })
      }
    }
  }
}
</script>
<style lang="less" scoped>
// .tableListPage {
//   padding: 24px 24px 8px 24px;
//   height: 100%;
//   overflow: auto;
  .tableListAction {
    margin-top: 16px;
    button {
      margin-right: 16px;
      &:nth-last-child(1) {
        margin-right: 0;
      }
    }
  }
  .tableListMain {
    margin-top: 16px;
    margin-bottom: 16px;
  }
// }
</style>
